<template>
  <div class="order-list-page">
    <van-tabs class="home-page-tabs" v-model="active" @click="tabSwitch" swipe-threshold=5>
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <!-- 列表 -->
    <van-pull-refresh class="refresh-list" v-model="isLoading" @refresh="onRefresh" :success-duration="800" success-text="加载成功" loading-text="加载中...">
    <van-list v-model="loading" :finished="finished" :finished-text="没有更多了" @load="onBottomLoad" :immediate-check="false" v-if="list.length>0">
        <div class="order-list" v-for="(item,index) in list" :key="index" >
          <div class="order-title dis-sp" @click="orderDetail(item)">
            <div class="order-title-left rx-sc">
              <img :src="item.sellerInfo.sellerLogo" />
              <div class="">{{item.sellerInfo.sellerName}}</div>
            </div>
            <div class="order-title-right" :style="item.orderInfo.orderStatus==5?'color:#8A8B90':'color:#DB1919'">{{item.orderInfo.orderStatus==1?'待付款':item.orderInfo.orderStatus==2?'待发货':item.orderInfo.orderStatus==3?'待收货':item.orderInfo.orderStatus==4?'交易成功':item.orderInfo.orderStatus==5?'交易关闭':'未知'}}</div>
          </div>
          <div class="order-content dis-sp-s" @click="orderDetail(item)">
            <div class="order-goods rx-ss">
              <div class="goods-img" :style="{backgroundImage:'url('+item.goodsInfo.mainPhoto+')'}">
                <!-- <img :src="item.goodsInfo.mainPhoto" alt=""> -->
              </div>
              <div class="goods-detail">
                <div class="goods-title">{{item.goodsInfo.goodsName}}</div>
                <div class="rx-sc">
                  <div class="goods-label" v-for="(li,i) in item.goodsInfo.labels" :key="i">{{li}}</div>
                </div>
              </div>
            </div>
            <div class="" style="text-align: right;">
              <div class="order-price">￥<span>{{item.goodsInfo.goodsPrice}}</span></div>
              <span class="order-num">x {{item.goodsInfo.goodsNum}}</span>
            </div>
          </div>
          <div class="order-total">合计<span> ￥{{item.orderInfo.totalPrice}}</span></div>
          <div class="order-btn rx-ec" v-if="item.orderInfo.orderStatus != 2">
            <div class="cancel-order" v-if="item.orderInfo.orderStatus == 1" @click="cancelOrder(item,index)">取消订单</div>
            <div class="continue-order" v-if="item.orderInfo.orderStatus == 1" @click="continuePay(item,index)">继续付款</div>
            <div class="confirm-order" v-if="item.orderInfo.orderStatus == 3" @click="confirmOrder(item,index)">确认收货</div>
            <div class="delete-order" v-if="item.orderInfo.orderStatus == 4 || item.orderInfo.orderStatus == 5" @click="deleteOrder(item,index)">删除订单</div>
          </div>
        </div>
    </van-list>
    <div id="data-list-box" v-if="list.length==0">
      <noData :tipsText="tipsText"></noData>
    </div>
    </van-pull-refresh>
  </div> 
</template>

<script>
import $api from "@/api/index";
import noData from "@/components/noData"
export default {
  name: "OrderList",
  components: {
    noData
  },
  data() {
    return { 
      tipsText:'此状态暂无订单',
      active:this.$route.query.status,
      list:[],
      page:0,
    };
  },
  created(){
    let status = this.$route.query.status
    if(status){
      this.active = JSON.parse(status)
    }
    this.getOrderLi()
  },
  methods: {
    onRefresh() {
      //下拉刷新
      // if (this.isLoading) return; //还在请求中，返回
      this.page = 0; //重置第一页
      this.isLoading = true; //开始加载
      this.finished = false; //上拉加载"所有数据已经完成"标识 重置为false
      //接口请求
      this.getOrderLi();
      this.isLoading = false; //开始加载
    },
    onBottomLoad() {
      //上拉加载更多
      if (this.finished) return; //说明所有数据已经加载完毕，返回
      this.page=this.page+1
      this.finished = true
      this.loading = false
      this.getOrderLi(); //下一页数据请求中
    },
    tabSwitch(name){
      console.log(name)
      this.page = 0
      this.getOrderLi()
    },
    //获取订单列表
    getOrderLi(){
      $api.orderApi.orderList({page:this.page,size:10,state:this.active}).then((res)=>{
        console.log(res)
        if(this.page > 0){
          this.list = this.list.concat(res.data.content) 
        }else{
          this.list = res.data.content
        }
        this.finished = !res.data.hasNextPage
        this.loading = false
      })
    },
    orderDetail(item){
      this.$router.push({path:'/orderDetail',query: {orderId:String(item.orderInfo.orderId)}})
    },
    deleteOrder(item,index){
      $api.orderApi.deleteOrder({orderId:item.orderInfo.orderId}).then((res)=>{
        console.log(res)
        if(res.status == 10000){
          this.list.splice(index,1)
        }
      })
    },
    continuePay(item,index){
      $api.orderApi.continuePay({orderId:item.orderInfo.orderId}).then((res)=>{
        if(res.status == 10000){
          let datas = res.data.data
          let that = this
          function onBridgeReady() {
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                  "appId": datas.appId,     //公众号名称，由商户传入
                  "timeStamp": datas.timeStamp,         //时间戳，自1970年以来的秒数
                  "nonceStr": datas.nonceStr, //随机串
                  "package": datas.package,
                  "signType": datas.signType,         //微信签名方式：
                  "paySign": datas.paySign //微信签名
              },
              function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    that.$toast.success('支付成功');
                    this.list.splice(index,1)
                    // that.$router.replace({path:"/paySuccess"})
                    that.active = 2
                    that.page = 0
                    that.getOrderLi()
                  } else {
                    that.$toast.fail('您已取消支付');
                  }
              }
            )}
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
          }
        })
    },
    cancelOrder(item,index){
      $api.orderApi.cancelOrder({orderId:item.orderInfo.orderId}).then((res)=>{
        if(res.status == 10000){
          this.$toast("取消成功");
          this.list.splice(index,1)
        }
      })
    },
    confirmOrder(item,index){
      $api.orderApi.confirmOrder({orderId:item.orderInfo.orderId}).then((res)=>{
        console.log(res)
        if(res.status == 10000){
          this.$toast("收货完成");
          this.list.splice(index,1)
        }
      })
      
    }
    
  },
  activated(){

  }
};
</script>

<style lang="scss" scoped>
.order-list-page {
  // height: 100vh;
  background: #F7F7F7;
  .home-page-tabs {
    width: 100%;
    position:fixed;
    z-index: 10;
  }
  .refresh-list {
    padding-top: 80px;
    min-height: 100vh;
  }
  .order-list {
    margin-top: 24px;
    padding: 24px 24px 32px 24px;
    background: #fff;
    .order-title {
      margin: 0 0 32px 0;
      font-size: 28px;
      .order-title-left{
        color: #50525A;
        img {
          width: 32px;
          height: 32px;
          margin-right: 12px;
        }
      }
    }
    .order-goods {
      .goods-img {
        min-width:160px;
        width: 160px;
        height: 160px;
        margin-right: 24px;
        border-radius: 4px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .goods-title {
        font-size: 24px;
        color: #171823;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-right: 60px;
        margin-bottom: 36px;
        text-align: left;
      }
      .goods-label {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        margin-right: 10px;
        border-radius: 4px;
        border: 1px solid #DB1919;
        font-size: 20px;
        color: #DB1919;
      }
    }
    .order-price {
      color: #8A8B90;
      font-size: 20px;
      span {
        font-size: 28px;
      }
    }
    .order-num {
      font-size: 24px;
      color: #8A8B90;
    }
    .order-total {
      margin-top: 28px;
      color: #50525A;
      font-size: 28px;
      text-align: right;
      span {
        color: #171823;
      }
    }
    .order-btn {
      padding: 32px 0 0 0;
      .cancel-order {
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #D7D8D8;
        color: #8A8B90;
        margin-right: 16px;
      }
      .continue-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #DB1919;
        color: #fff;
        border-radius: 2px;
      }
      .confirm-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #DB1919;
        color: #fff;
        border-radius: 2px;
      }
      .delete-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #D7D8D8;
        color: #8A8B90;
      }
    }
  }
  .color-8A8B90 {
    color: #8A8B90 !important;
  }
}
</style>